<template>
	<view class="personal_center">
		<TnNavbar fixed bg-color="#16171b" text-color="#FFFFFF" home-icon="" back-icon=""
			:safe-area-inset-right="false">
			
		</TnNavbar>
		<view class="user">
			<view class="user_left">
				<view class="profilepicture" @click="profilepicture">
					<image src="https://resource.tuniaokj.com/images/xiongjie/x14.jpg" mode="aspectFill"></image>
				</view>
				<view class="user_name">
					桥豆麻袋_
				</view>
			</view>
			<!-- <view class="setup_icon">
				<TnIcon name="install" color="#606063" size="50rpx"/>
			</view> -->
		</view>
		<view class="information">
			<view class="information_item">
				<view class="information_item_icon">
					 <TnIcon name="like-lack-fill" :custom-style="style" />
				</view>
				<view class="information_item_text">
					<text>喜欢</text>
					<text>3000</text>
				</view>
				
			</view>
			<view class="information_item">
				<view class="information_item_icon">
					 <TnIcon name="panda" :custom-style="style" />
				</view>
				<view class="information_item_text">
					<text>关注</text>
					<text>1000</text>
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_icon">
					 <TnIcon name="whale" :custom-style="style" />
				</view>
				<view class="information_item_text">
					<text>粉丝</text>
					<text>100</text>
				</view>
				
			</view>
		</view>
		<view class="core">
			<view class="core_item" @click="boiling">
				<view class="boiling_icon">
					<image src="../../static/boiling.png" mode="aspectFit"></image>
				</view>
				<view class="boiling" >
					熬制鸡汤
				</view>
			</view>
			<view class="core_item" @click="boilingLogo">
				<view class="boiling_icon">
					<image src="../../static/boiling.png" mode="aspectFit"></image>
				</view>
				<view class="boiling" >
					熬制鸡汤
				</view>
			</view>
			<!-- <view class="tnwave waveAnimation">
			  <view class="waveWrapperInner bgTop">
			    <view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
			  </view>
			  <view class="waveWrapperInner bgMiddle">
			    <view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
			  </view>
			  <view class="waveWrapperInner bgBottom">
			    <view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
			  </view>
			</view> -->
		</view>
		<view class="other">
			<view class="other_item" v-for="item in 5" :key="item.id">
				<div class="other_item_left">
					<TnIcon name="mammoth"  :custom-style="otherStyle" />
					<text>关于我们</text>
				</div>
				<div class="other_item_right">
					<TnIcon name="right"  :custom-style="otherRStyle" />
				</div>
			</view>
		</view>
	</view>
</template>

<script setup>
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	const boiling = () => {
		uni.redirectTo({
			url: "/newpages/boiling/boiling"
		})
	}
	const style = {
	  fontSize: '70rpx',
	  color: '#01beff',
	}
	
	const otherStyle = {
		fontSize: '60rpx',
		color: '#FFFFFF',
	}
	const otherRStyle = {
		fontSize: '40rpx',
		color: '#FFFFFF',
	}
	
	const boilingLogo = () => {
		uni.redirectTo({
			url:"/uni_modules/uni-id-pages/pages/login/login-withpwd"
		})
	}
	const profilepicture = () => {
		uni.redirectTo({
			url:"/uni_modules/uni-id-pages/pages/userinfo/userinfo"
		})
	}
</script>

<style lang="scss" scoped>
	.personal_center {
		padding: 0 40rpx;

		.user {

			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.user_left {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;

				.profilepicture {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 6rpx solid #222327;
					padding: 6rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.user_name {
					margin-top: 20rpx;
					font-family: MiSans,MiSans;
					color:#FFFFFF;
					font-szie:60rpx
				}
			}
		}
		.information {
			display: flex;
			align-items: center;
			width: 100%;
			height: 150rpx;
			margin-top: 30rpx;
			background:#1e222e;
			border-radius: 20rpx;
			.information_item {
				width: 33.33%;
				display: flex;
				justify-content: center;
				align-items: center;
				.information_item_icon {
					
				}
				.information_item_text {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-family: MiSans,MiSans;
					color:#FFFFFF;
					font-szie:60rpx;
					margin-left: 20rpx;
				}
			}
		}
		.core {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 30rpx;
			position: relative;
			z-index: 1;
			.core_item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 140rpx;
				background:#1e222e;
				border-radius: 20rpx;
				.boiling_icon {
					width: 80rpx;
					height: 80rpx;
					image {
						width:100%;
						height:100%
					}
				}
				.boiling {
					margin-left: 20rpx;
					color: #ffffff;
					font-size: 30rpx;
				}
			}
			
		}
		.other {
			margin-top: 40rpx;
			.other_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 120rpx;
				border-bottom: 2rpx solid 	#1e222e;
				.other_item_left {
					font-family: MiSans,MiSans;
					color:#FFFFFF;
					font-szie:60rpx;
					vertical-align: bottom;
					display: flex;
					align-items: center;
					text {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	
	/* 动态背景波浪*/
  @keyframes move_wave {
      0% {
          transform: translateX(0) translateZ(0) scaleY(1)
      }
      50% {
          transform: translateX(-25%) translateZ(0) scaleY(1)
      }
      100% {
          transform: translateX(-50%) translateZ(0) scaleY(1)
      }
  }
  .tnwave {
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      z-index: -1;
      border-radius: 15rpx;
  }
  .waveWrapperInner {
      position: absolute;
      width: 100%;
      overflow: hidden;
      height: 100%;
  }
  .wave {
      position: absolute;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat no-repeat;
      background-position: 0 bottom;
      transform-origin: center bottom;
  }
  
  .bgTop {
      opacity: 0.1;
  }
  .waveTop {
      background-size: 50% 45px;
  }
  .waveAnimation .waveTop {
    animation: move_wave 4s linear infinite;
  }
  
  .bgMiddle {
      opacity: 0.2;
  }
  .waveMiddle {
      background-size: 50% 40px;
  }
  .waveAnimation .waveMiddle {
      animation: move_wave 3.5s linear infinite;
  }
  
  .bgBottom {
      opacity: 0.3;
  }
  .waveBottom {
      background-size: 50% 35px;
  }
  .waveAnimation .waveBottom {
      animation: move_wave 2s linear infinite;
  }
</style>